<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Examples</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <div id="root">
        {{title}}
        <my-header></my-header>
        {{list}}
        {{obj}}
    </div>
    <div id="app">
        {{title}}
    </div>
    <script src="../vue.js"></script>
    <script>
        /*
            可以在页面上创建多个 实例
            因为是 实例 所以可以创建多个
            一个vue组件或者自定义组件也是一个实例

        */
    //  全局定义一个组件 
    //  通过vue对象component定义的组件 不能与内置标签名称相同 必须定义成kebab-case
       Vue.component('my-header',{
           template:`
            <header>title</header>
           `
       })
    //    实例化vue
        var vm = new Vue({
            el: "#root",
            data: {
                title: 'hello',
                list:['a','b'],
                obj:{
                    x: 0
                }
            }
        })
// 修改数组的两个方法
// 1. arr.length = 0 , 不具有响应特性
// 2. arr[0] = 100,不具备响应特性
//  修改对象的特殊情况
// 添加obj.x , x属性，也不具备响应特性
// 修补方法：
// 1.   vm.$set(target , propertyName/index , value)
// 2.   Vue.set(target , propertyName/index , value)
// 3.   vm.forceupdate()
        var vm2 = new Vue({
            el: "#app",
            data: {
                title: 'world'
            }
        })
        
    </script>
</body>

</html>